<template>
  <div>
    <movie-header></movie-header>

    <div class="contentMain">
      <Card class="card" :dis-hover="true">
        <Tabs value="0">
          <TabPane label="个人信息" name="0">
            <List class="list">
              <ListItem>用户名：{{ userInfo.username }}</ListItem>
              <ListItem>邮箱：{{ userInfo.userMail }}</ListItem>
              <ListItem>手机号：{{ userInfo.userPhone }}</ListItem>
              <ListItem>用户状态：{{ userStatus }}</ListItem>
              <ListItem>
                <router-link to="/sendEmail">
                  <i-button type="primary">站内信</i-button>
                </router-link>
              </ListItem>
            </List>
          </TabPane>
          <TabPane label="修改密码" name="1">
            <Form
              ref="formInline"
              :model="formInline"
              :rules="ruleInline"
              :label-width="120"
            >
              <Row>
                <i-col span="12" offset="6">
                  <FormItem prop="password" label="旧密码">
                    <i-input
                      type="password"
                      password
                      v-model="formInline.password"
                      placeholder="Password"
                    >
                      <Icon type="ios-lock-outline" slot="prepend"></Icon>
                    </i-input>
                  </FormItem>
                </i-col>
              </Row>
              <Row>
                <i-col span="12" offset="6">
                  <FormItem prop="rePassword" label="新密码">
                    <i-input
                      type="password"
                      password
                      v-model="formInline.rePassword"
                      placeholder="Password"
                    >
                      <Icon type="ios-lock-outline" slot="prepend"></Icon>
                    </i-input>
                  </FormItem>
                </i-col>
              </Row>
              <Row>
                <i-col span="12" offset="6">
                  <FormItem prop="rePasswordConfirm" label="确认新密码">
                    <i-input
                      type="password"
                      password
                      v-model="formInline.rePasswordConfirm"
                      placeholder="Password"
                    >
                      <Icon type="ios-lock-outline" slot="prepend"></Icon>
                    </i-input>
                  </FormItem>
                </i-col>
              </Row>
              <FormItem>
                <Button type="primary" @click="changeUserPassword('formInline')"
                  >确认修改</Button
                >
              </FormItem>
            </Form>
          </TabPane>
        </Tabs>
      </Card>

      <movie-footer></movie-footer>
    </div>
  </div>
</template>

<script>
import MovieHeader from '../../components/MovieHeader'
import MovieFooter from '../../components/MovieFooter'
import UserMessage from '../../components/UserMessage'
export default {
  components: {
    MovieHeader,
    MovieFooter,
    UserMessage
  },
  data() {
    return {
      user_id: localStorage.getItem('_id'),
      userInfo: {
        username: '',
        userMail: '',
        userPhone: ''
      },
      userStatus: '',
      formInline: {
        password: '',
        rePassword: '',
        rePasswordConfirm: ''
      },
      ruleInline: {
        password: [
          {
            required: true,
            message: 'Please fill in the password.',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 6,
            message: 'The password length cannot be less than 6 bits',
            trigger: 'blur'
          }
        ],
        rePassword: [
          {
            required: true,
            message: 'Please fill in the password.',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 6,
            message: 'The password length cannot be less than 6 bits',
            trigger: 'blur'
          }
        ],
        rePasswordConfirm: [
          {
            required: true,
            message: 'Please fill in the password.',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 6,
            message: 'The password length cannot be less than 6 bits',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      this.$http
        .post(
          'http://localhost:3000/showUser',
          { user_id: this.user_id },
          { emulateJSON: true }
        )
        .then(({ body }) => {
          const { data, status } = body
          if (status === 200) {
            this.userInfo = data
            if (!data.userStop) {
              this.userStatus = '用户状态正常'
            } else {
              this.userStatus = '用户已经被封停'
            }
          }
        })
    },
    // 修改密码
    changeUserPassword(name) {
      const formData = {
        user_id: localStorage.getItem('_id'),
        token: localStorage.getItem('token'),
        password: this.formInline.password,
        rePassword: this.formInline.rePassword
      }
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$http
            .post('http://localhost:3000/user/findPassword', formData, {
              emulateJSON: true
            })
            .then(({ body }) => {
              const { status, message } = body
              if (status === 200) {
                this.$Message.success({
                  content: message,
                  duration: 2,
                  closable: true
                })
                this.$refs[name].resetFields()
                localStorage.clear()
                this.$router.push({ path: '/login' })
              }
            })
        } else {
          this.$Message.error('Fail!')
        }
      })
    }
  }
}
</script>

<style lang="css" scoped>
.contentMain {
  /* margin-top: 68px; */
  padding: 0 8px;
  margin-bottom: 68px;
}
.list {
  padding: 0 18px;
}
</style>
